<template>
  <div class="category-page">
    <div class="page-header">
      <h1 class="page-title">{{ categoryTitle }}</h1>
    </div>
    
    <div class="news-filter">
      <a-space>
        <a-radio-group v-model:value="sortBy" button-style="solid">
          <a-radio-button value="latest">最新发布</a-radio-button>
          <a-radio-button value="popular">最多浏览</a-radio-button>
        </a-radio-group>
      </a-space>
    </div>
    
    <div class="news-list-container">
      <div v-if="loading" class="loading-container">
        <a-spin size="large" />
      </div>
      
      <template v-else>
        <div v-if="newsList.length > 0" class="news-grid">
          <news-card 
            v-for="item in newsList" 
            :key="item.id" 
            :news="item" 
          />
        </div>
        
        <a-empty v-else description="暂无相关新闻" />
      </template>
      
      <div class="pagination-container">
        <a-pagination
          v-model:current="currentPage"
          :total="total"
          :page-size="pageSize"
          show-quick-jumper
          @change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import NewsCard from '../../components/NewsCard.vue'
import request from '@/utils/request' // 导入配置好的 axios 实例

const props = defineProps({
  type: {
    type: String,
    required: true
  }
})

const route = useRoute()

// 状态变量
const loading = ref(false)
const newsList = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)
const sortBy = ref('latest')
const categoryId = ref(0)

// 根据类型计算分类标题
const categoryTitle = computed(() => {
  switch (props.type) {
    case 'important':
      categoryId.value = 1
      return '学校要闻'
    case 'academic':
      categoryId.value = 2
      return '学术动态'
    case 'general':
      categoryId.value = 3
      return '综合新闻'
    case 'notice':
      categoryId.value = 4
      return '通知公告'
    default:
      return '新闻列表'
  }
})

// 获取新闻列表数据
const fetchNewsList = async () => {
  loading.value = true
  switch (props.type) {
    case 'important':
      categoryId.value = 1
      break
    case 'academic':
      categoryId.value = 2
      break
    case 'general':
      categoryId.value = 3
      break
    case 'notice':
      categoryId.value = 4
      break
  }
  try {
    // 实际项目中应该调用API
    const response = await request.post('/news/frontend/list/'+currentPage.value + '/' + pageSize.value, {
        categoryId: categoryId.value,
      })
    const data = response.data
    newsList.value = data.records
    total.value = data.total
    
    // 分页
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    
  } catch (error) {
    message.error('获取新闻列表失败，请稍后再试')
    console.error('获取新闻列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 页码变化处理
const handlePageChange = (page) => {
  currentPage.value = page
  fetchNewsList()
  // 滚动到顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// 监听分类和排序变化
watch(() => props.type, () => {
  currentPage.value = 1
  fetchNewsList()
})

watch(() => sortBy.value, () => {
  fetchNewsList()
})

// 组件挂载时获取数据
onMounted(() => {
  fetchNewsList()
})
</script>

<style scoped>
.category-page {
  padding-bottom: 30px;
}

.page-header {
  margin-bottom: 20px;
}

.news-filter {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.news-list-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 992px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .news-filter {
    justify-content: center;
  }
}
</style>